<mat-toolbar class="dialog-title" color="primary">
  <div>{{ 'preference.advanced.dialog.title' | translate }}</div>
  <button mat-icon-button (click)="onNoClick()">
    <fa-icon icon="times"></fa-icon>
  </button>
</mat-toolbar>
<ng-container *ngIf="type !== 'data-preview'; else dataPreview">
<div mat-dialog-content>
  <div>
    <!-- <mat-form-field style="padding-right: 1rem;">
      <mat-label>{{ 'preference.advanced.dialog.partition' | translate }}</mat-label>
      <input matInput [(ngModel)]="data.data.partid" autocomplete="off" [disabled]="!isAdmin">
      <mat-error *ngIf="partid?.errors?.required">{{'validators.required' | translate }}</mat-error>
      <mat-error *ngIf="partid?.errors?.min">{{'validators.minNumber' | translate }} 1</mat-error>
      <mat-error *ngIf="partid?.errors?.max">{{'validators.maxNumber' | translate }} 100</mat-error>
      <mat-error *ngIf="partid?.errors?.pattern && !partid?.errors?.min">{{'validators.patternNumber' | translate }}</mat-error>
    </mat-form-field> -->
    <mat-form-field style="padding-right: 1rem;">
      <mat-label>{{ 'preference.advanced.dialog.category' | translate }}</mat-label>
      <input matInput [(ngModel)]="data.data.category" autocomplete="off" [formControl]="category" [disabled]="!isAdmin">
      <mat-error *ngIf="category?.errors?.required">{{'validators.required' | translate }}</mat-error>
      <mat-error *ngIf="category?.errors?.minlength">
        {{ category?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
      </mat-error>
      <mat-error *ngIf="category?.errors?.maxlength">
        {{ category?.errors?.maxlength?.requiredLength }} {{'validators.maxChars' | translate }}
      </mat-error>
      <mat-error *ngIf="category?.errors?.pattern && !category?.errors?.minlength">
        {{'validators.pattern' | translate }} [aA-Zz], [0-9], "-" or "_"]
      </mat-error>
    </mat-form-field>
    <mat-form-field style="padding-right: 1rem;">
      <mat-label>{{ 'preference.advanced.dialog.param' | translate }}</mat-label>
      <input matInput [(ngModel)]="data.data.param" autocomplete="off" [formControl]="param" [disabled]="!isAdmin">
      <mat-error *ngIf="param?.errors?.required">{{'validators.required' | translate }}</mat-error>
      <mat-error *ngIf="param?.errors?.minlength">
        {{ param?.errors?.minlength?.requiredLength }} {{'validators.minChars' | translate }}
      </mat-error>
    </mat-form-field>
  </div>
  <strong>{{ 'preference.advanced.dialog.data' | translate }}</strong>
  <hr />
  <full-screen (fullPage)='disableClose($event)' 
                (import)='import($event)' 
                [data]='{json:data.data.data, title: data.data.category + " " + data.data.param, type: "json"}' (import)='import($event)'>
    <ace-editor [mode]="'json'" [theme]="'monokai'" [readOnly]="false" [(text)]="data.data.data"
      (textChanged)="validate()" [durationBeforeCallback]="500" #data_view [style.height.%]="100"></ace-editor>
  </full-screen>
</div>

<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button (click)="onNoClick()">{{'LINK.buttons.cancel' | translate }}</button>
  <button mat-raised-button class="setting-btn-ok" cdkFocusInitial [disabled]='isDisabled'
    (click)="onSubmit()">{{'LINK.buttons.save' | translate }}</button>
</div>
</ng-container>
<ng-template #dataPreview>
    <div mat-dialog-content>
        <div>
          <mat-form-field style="padding-right: 1rem;">
            <mat-label>{{ 'preference.advanced.dialog.partition' | translate }}</mat-label>
            <input matInput [(ngModel)]="data.data.partid" autocomplete="off" [disabled]="true">
          </mat-form-field>
          <mat-form-field style="padding-right: 1rem;">
            <mat-label>{{ 'preference.advanced.dialog.category' | translate }}</mat-label>
            <input matInput [(ngModel)]="data.data.category" autocomplete="off" [disabled]="true">
          </mat-form-field>
          <mat-form-field style="padding-right: 1rem;">
            <mat-label>{{ 'preference.advanced.dialog.param' | translate }}</mat-label>
            <input matInput [(ngModel)]="data.data.param" autocomplete="off" [disabled]="true">
          </mat-form-field>
        </div>
        <strong>{{ 'preference.advanced.dialog.data' | translate }}</strong>
        <hr />
        <ngx-json-viewer [json]="json" [expanded]="true"></ngx-json-viewer>

      </div>
      <div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
        <button mat-raised-button class="setting-btn-ok" cdkFocusInitial [disabled]='isDisabled'
          (click)="onNoClick()">{{'LINK.buttons.close' | translate }}</button>
      </div>
</ng-template>